/**
 * Created by 小敏哥 on 2017/12/29.
 */
import React, {Component} from 'react';
import style from './index.scss';

class IllegalDetailItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: typeof(props.forceStatus) != 'undefined' ? props.forceStatus : false,
        }
    }

    static propTypes = {
        enable: React.PropTypes.bool,//是否可用
        statusChange: React.PropTypes.func,//选中项改变事件
        forceStatus: React.PropTypes.bool,//外部传入选中状态，优先级较高
        title: React.PropTypes.string,//标题
        occurTime: React.PropTypes.string,//发生时间
        degree: React.PropTypes.string,//扣分
        fine: React.PropTypes.number,//罚款
        reason: React.PropTypes.string,//原因
        proxyRule: React.PropTypes.array,//资料列表
        archive: React.PropTypes.string,//决定文书编号
        canProcessMsg: React.PropTypes.string,//可办理信息
        backendId: React.PropTypes.string,//违章id
    };

    componentWillReceiveProps(nextProps) {
        if (this.props.forceStatus !== nextProps.forceStatus) {
            this.setState({
                checked: nextProps.forceStatus
            })
        }
    }

    //更改状态
    setCheckStatus() {
        this.setState({
            checked: !this.state.checked
        }, () => {
            this.props.statusChange && this.props.statusChange(this.props.backendId, this.state.checked)
        })
    }

    structTips(doclist) {
        if (doclist && doclist.length > 0) {
            return <div className={style.tips}>
                <div className={style.tipsTitle}>该违章还需补充</div>
                <div className={style.docList}>
                    {doclist.map((item, index) => {
                        return <div key={index}>{item}</div>
                    })}
                </div>
            </div>
        }
        else {
            return <div className={style.tips}>
                <div className={style.tipsTitle}>资料已补充完毕</div>
                <img src="./images/finish.png"/></div>
        }
    }

    getCheckImg() {
        if (!this.props.enable) {
            return './images/icon-check_disable.png'
        }
        else if (this.state.checked) {
            return "./images/checked.png";
        }
        else {
            return "./images/no_checked.png";
        }
    }

    render() {
        return <div className={style.illegalDetailItem} onClick={() => {
            this.props.enable && this.setCheckStatus();
        }}>
            <div className={style.title}>{this.props.title}</div>
            <div className={style.content}>
                <div className={style.check}><img src={this.getCheckImg()}/></div>
                <div className={style.contentMessage}>
                    <div className={style.messageHeader}>
                        <span>{this.props.occurTime}</span><span>{`扣${this.props.degree}分`}</span><span>{`罚款${this.props.fine}元`}</span>
                    </div>
                    <p className={style.message}>{this.props.reason}</p>
                    {this.structTips(this.props.proxyRule)}
                    <div className={style.number}>{`决定文书编号：${this.props.archive}`}</div>
                </div>
            </div>
            <p className={this.props.enable?style.bottom:style.bottom+' '+style.unable}>{this.props.canProcessMsg}</p>
        </div>
    }
}

export default IllegalDetailItem